<template>
  <div class="AcademicList">
    <!-- 搜索 -->
    <div class="searchBox">
      <el-input
        v-model="searchInput"
        placeholder="请输入论文关键词！"
        class="input-with-select"
        @keyup.enter.native="gotoPage"
      >
        <template #prepend>
          <el-select
            class="selectBox"
            v-model="searchTypeVal"
            @change="selectChange"
          >
            <el-option
              v-for="item in select"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            >
              <span class="iconfont" :class="'icon-' + item.icon"></span>
              <span class="selctInfo" v-text="item.lable"></span>
            </el-option>
          </el-select>

          <div class="typeShow">
            <span class="iconfont" :class="'icon-' + selectShow.icon"></span>
            <span class="selctInfo" v-text="selectShow.lable"></span>
          </div>
        </template>
        <template #append>
          <el-button>
            <span class="iconfont icon-sousuo" @click="gotoPage"></span>
          </el-button>
        </template>
      </el-input>
    </div>

    <!-- 导航 -->
    <div class="navBox">
      <el-affix :offset="0">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#409eff"
        >
          <el-menu-item
            v-for="(item, index) in navName"
            :key="index"
            :index="index + ''"
            v-text="item.name"
          ></el-menu-item>
        </el-menu>
      </el-affix>
    </div>

    <!-- 内容 -->
    <div class="main">
      <div class="brandList" :ref="setRef">
        <h4>工作平台</h4>
        <div class="listShow">
          <el-row class="col-row" :gutter="20">
            <el-col
              class="col-list"
              :span="4"
              v-for="(item, index) in WorkJson"
              :key="index"
            >
              <div class="figureBox">
                <div class="collapseTitle">
                  <p v-text="item.title"></p>
                </div>
                <figcaption class="collapseSide">
                  <el-link
                    class="linkStyle"
                    target="_blank"
                    :underline="false"
                    :href="item.url"
                    v-text="item.content"
                  ></el-link>
                  <!-- <p v-text="item.content"></p> -->
                </figcaption>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="brandList" :ref="setRef">
        <h4>论文检索</h4>
        <div class="listShow">
          <el-row class="col-row" :gutter="20">
            <el-col
              class="col-list"
              :span="4"
              v-for="(item, index) in thesisJson"
              :key="index"
            >
              <div class="figureBox">
                <div class="collapseTitle">
                  <p v-text="item.title"></p>
                </div>
                <figcaption class="collapseSide">
                  <el-link
                    class="linkStyle"
                    target="_blank"
                    :underline="false"
                    :href="item.url"
                    v-text="item.content"
                  ></el-link>
                  <!-- <p v-text="item.content"></p> -->
                </figcaption>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="brandList" :ref="setRef">
        <h4>文献数据</h4>
        <div class="listShow">
          <el-row class="col-row" :gutter="20">
            <el-col
              class="col-list"
              :span="4"
              v-for="(item, index) in literatureJson"
              :key="index"
            >
              <div class="figureBox">
                <div class="collapseTitle">
                  <p v-text="item.title"></p>
                </div>
                <figcaption class="collapseSide">
                  <el-link
                    class="linkStyle"
                    target="_blank"
                    :underline="false"
                    :href="item.url"
                    v-text="item.content"
                  ></el-link>
                  <!-- <p v-text="item.content"></p> -->
                </figcaption>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="brandList" :ref="setRef">
        <h4>常用软件</h4>
        <div class="listShow">
          <el-row class="col-row" :gutter="20">
            <el-col
              class="col-list"
              :span="4"
              v-for="(item, index) in softwareJson"
              :key="index"
            >
              <div class="figureBox">
                <div class="collapseTitle">
                  <p v-text="item.title"></p>
                </div>
                <figcaption class="collapseSide">
                  <el-link
                    class="linkStyle"
                    target="_blank"
                    :underline="false"
                    :href="item.url"
                    v-text="item.content"
                  ></el-link>
                  <!-- <p v-text="item.content"></p> -->
                </figcaption>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="brandList" :ref="setRef">
        <h4>农业机构</h4>
        <div class="listShow">
          <el-row class="col-row" :gutter="20">
            <el-col
              class="col-list"
              :span="4"
              v-for="(item, index) in ARIJson"
              :key="index"
            >
              <div class="figureBox">
                <div class="collapseTitle">
                  <p v-text="item.title"></p>
                </div>
                <figcaption class="collapseSide">
                  <el-link
                    class="linkStyle"
                    target="_blank"
                    :underline="false"
                    :href="item.url"
                    v-text="item.content"
                  ></el-link>
                  <!-- <p v-text="item.content"></p> -->
                </figcaption>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="brandList" :ref="setRef">
        <h4>农业核心期刊</h4>
        <div class="listShow">
          <el-row class="col-row" :gutter="20">
            <el-col
              class="col-list"
              :span="4"
              v-for="(item, index) in ACPJson"
              :key="index"
            >
              <div class="figureBox">
                <div class="collapseTitle">
                  <p v-text="item.title"></p>
                </div>
                <figcaption class="collapseSide">
                  <el-link
                    class="linkStyle"
                    target="_blank"
                    :underline="false"
                    :href="item.url"
                    v-text="item.content"
                  ></el-link>
                  <!-- <p v-text="item.content"></p> -->
                </figcaption>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { thesis, literature, software, ARI, ACP } from '@/util/data.js'
import { Work } from '../../util/data'

export default defineComponent({
  name: 'AcademicList',
  components: {},
  setup() {
    const searchInput = ref('')
    const searchTypeVal = ref('ZhiWang')
    const select = reactive([
      {
        lable: 'Google学术',
        value: 'Google学术',
        icon: 'google',
        url: 'https://scholar.justscience.cn/scholar?hl=zh-CN&as_sdt=0%2C5&q=',
      },
      {
        lable: 'Bing',
        value: 'Bing',
        icon: 'bing',
        url: 'https://cn.bing.com/academic/search?q=',
      },
      {
        lable: '中国知网',
        value: '中国知网',
        icon: 'zhiwang',
        url: 'https://kns.cnki.net/kns/brief/Default_Result.aspx?code=SCDB&kw=',
      },
      {
        lable: 'SpringerLink',
        value: 'SpringerLink',
        icon: 'springerlink',
        url: 'https://link.springer.com/search?query=',
      },
      {
        lable: '百度学术',
        value: '百度学术',
        icon: 'baidu',
        url: 'https://xueshu.baidu.com/s?wd=',
      },
    ])

    const selectShow = ref({
      lable: '中国知网',
      value: '中国知网',
      icon: 'zhiwang',
      url: 'https://kns.cnki.net/kns/brief/Default_Result.aspx?code=SCDB&kw=',
    })

    const activeIndex = ref('0')

    const thesisJson = reactive(thesis) // 论文检索
    const literatureJson = reactive(literature) // 论文检索
    const softwareJson = reactive(software) // 论文检索
    const ARIJson = reactive(ARI) // 论文检索
    const ACPJson = reactive(ACP) // 论文检索
    const WorkJson = reactive(Work)

    const navName = reactive([
      {
        name: '工作平台',
      },
      {
        name: '论文检索',
      },
      {
        name: '文献数据',
      },
      {
        name: '常用软件',
      },
      {
        name: '农业机构',
      },
      {
        name: '农业核心期刊',
      },
    ])

    let time_hover = ref(null)

    const contentTop = reactive([])

    const jsAppContent = document.querySelector('.jsAppContent')
    let jsAppContentSTP = 0

    const myRefList = ref([])

    const setRef = (el) => {
      myRefList.value.push(el)
    }

    // 导航点击
    const handleSelect = (key, keyPath) => {
      // console.log(key, keyPath)
      jsAppContent.scrollTop = contentTop[key]
    }

    const Throttle = function (method, context) {
      clearTimeout(method.tId)
      method.tId = setTimeout(function () {
        method.call(context)
      }, 250)
    }

    // 设置页面的滚动高度
    const setTop = () => {
      const myRefEl = myRefList.value
      for (let i = 0; i < myRefEl.length; i++) {
        contentTop.push(myRefEl[i].offsetTop - 100)
      }
    }

    // 设置导航选中
    const setNavAuto = () => {
      for (let i = 0; i < contentTop.length; i++) {
        if (jsAppContentSTP < contentTop[i] + 100) {
          activeIndex.value = i + ''
          break
        }
      }
    }

    const selectChange = (val) => {
      const fiterItem = select.filter((item) => {
        return item.value == val
      })

      selectShow.value = fiterItem[0]
    }

    // 跳转
    const gotoPage = () => {
      // console.log(selectShow)
      if (searchInput.value) {
        window.location.href = selectShow.value.url + searchInput.value
      }
    }

    onMounted(() => {
      setTop()
      jsAppContent.onscroll = function () {
        jsAppContentSTP = jsAppContent.scrollTop
        Throttle(setNavAuto, jsAppContent)
      }
    })

    return {
      searchInput,
      searchTypeVal,
      select,
      selectShow,
      activeIndex,

      thesisJson,
      literatureJson,
      softwareJson,
      ARIJson,
      ACPJson,
      WorkJson,

      navName,

      myRefList,
      setRef,
      handleSelect,
      selectChange,
      gotoPage,
    }
  },
})
</script>

<style lang="css" scoped>
@import 'index.css';
</style>
